<template>
  <div class="information">
    <div class="image">
      <!-- <img src="../../assets/img/reservation/banner.png" alt=""> -->
      <div class="title">
        <h2>rosewood information</h2>
      </div>
    </div>
    <div class="content">
      <ul>
        <li v-for="info in infos" :key="info.id">
          <div class="image" @click="jumpStoryCont(info.id)"><img :src="api + info.photo" alt=""></div>
          <div class="text">
            <h3 @click="jumpStoryCont(info.id)">{{info.title}}</h3>
            <p>{{info.content}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getInfo } from '../../api/infomation'

export default {
  data () {
    return {
      infos: '',
      api: 'http://47.96.89.247:8080/qf_hotel'
    }
  },
  created () {
    getInfo().then(res => {
      this.infos = res.data
    }).catch(err => console.log('数据加载异常', err))
  },
  methods: {
    jumpStoryCont (id) {
      this.$router.push({
        path: 'content',
        query: {
          id,
          name: 'info'
        }
      })
    }
  }
}
</script>

<style lang="scss" >
body{
  background: #f4f4f4;
}
.information{
  &>.image{
    position: relative;
    height: 884px;
    background: url(../../assets/img/reservation/banner.png) no-repeat;
    background-size: cover;
    .title{
      // position: absolute;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);
      h2{
        width: 100%;
        height: 112px;
        font-size: 80px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 36px;
        color: #FFFFFF;
        opacity: 1;
        text-align: center;
        position: absolute;
        top: 40%;
      }
    }
  }
  .content{
    padding-top: 10px;
    ul{
      width: 75%;
      margin: 0 auto;
      li{
        height: 50px;
        padding: 20px;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid #e8e8e8;
        .image{
          width: 75px;
          height: 100%;
          padding-right: 35px;
          display: inline-block;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .text{
          display: inline-block;
          height: 100%;
          h3{
            display: block;
            font-size: 18px;
            padding-bottom: 10px;
            line-height: 24px;
            cursor: pointer;
          }
          p{
            width: 600px;
            color: #666666;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
